<html>
   <head>
      <title>DEFAULT TEMPLATE</title>
      <script type="text/javascript">
         
         const CANVAS = {ICON:"canvasIcon",DROPBOX:"canvasDropBox"};
         const DIMENSION = {X:0,Y:0,WIDTH:1260,HEIGHT:670};
         
         var dx= 4;
         var dy=4;
         var mouse={x:0,y:0,m:0,n:0};
         var current={canvas:CANVAS.ICON,mousedown:false};
         var icons = new Array();
         var dropboxs = new Array(
                           new Array("Dropbox 0.0","Dropbox 0.1","Dropbox 0.2","Dropbox 0.3","Dropbox 0.4","Dropbox 0.5"),
                           new Array("Dropbox 1.0","Dropbox 1.1","Dropbox 1.2","Dropbox 1.3","Dropbox 1.4","Dropbox 1.5"),
                           new Array("Dropbox 2.0","Dropbox 2.1","Dropbox 2.2","Dropbox 2.3","Dropbox 2.4","Dropbox 2.5"),
                           new Array("Dropbox 3.0","Dropbox 3.1","Dropbox 3.2","Dropbox 3.3","Dropbox 3.4","Dropbox 3.5"),
                           new Array("Dropbox 4.0","Dropbox 4.1","Dropbox 4.2","Dropbox 4.3","Dropbox 4.4","Dropbox 4.5"),
                           new Array("Dropbox 5.0","Dropbox 5.1","Dropbox 5.2","Dropbox 5.3","Dropbox 5.4","Dropbox 5.5"),
                           new Array("Dropbox 6.0","Dropbox 6.1","Dropbox 6.2","Dropbox 6.3","Dropbox 6.4","Dropbox 6.5"),
                           new Array("Dropbox 7.0","Dropbox 7.1","Dropbox 7.2","Dropbox 7.3","Dropbox 7.4","Dropbox 7.5")
                        );
         
         document.onmousedown = mouseDown;
         document.onmouseup = mouseUp;
         document.onmousemove = mouseMove;
         
         window.onload = function(){
            var canvases = document.getElementsByTagName('canvas');
            for (i in canvases) {
               disableSelection(canvases[i]);
            }
            var images = document.getElementsByTagName('img');
            for (i in images) {
               disableSelection(images[i]);
            }
            
            //##########- ADD ICON HERE (START) -##########//
            //canvasicon.addIcon(x,y,width,height,src);
            canvasicon.addIcon(100,100,100,100,"eraser.png");
            canvasicon.addIcon(100,200,100,100,"pencil.png");
            canvasicon.addIcon(100,250,100,100,"eraser.png");
            canvasicon.addIcon(200,100,100,100,"pencil.png");
            canvasicon.addIcon(200,200,100,100,"eraser.png");
            canvasicon.addIcon(200,300,100,100,"pencil.png");
            canvasicon.addIcon(300,100,100,100,"eraser.png");
            canvasicon.addIcon(300,200,100,100,"pencil.png");
            canvasicon.addIcon(300,300,100,100,"eraser.png");
            //##########- ADD ICON HERE  (END)  -##########//
            
            //canvasicon.refresh();
            
            try{
               setInterval(canvasicon.refresh, 30);
            }catch(ex){
               dump(ex);
            }
         };
         
         function mouseMove(e){
            mouse.x = e.pageX;
            mouse.y = e.pageY;
         }
         function mouseDown(e){
            try{
            mouse.m = mouse.x;
            mouse.n = mouse.y;
            current.mousedown=true;
            current.selectedicon=canvasicon.selectIcon();
            canvasicon.updateOffset();
            //canvasicon.moveIcon();
            }catch(ex){alert(ex);}          
         }
         
         function mouseUp(e){
            current.mousedown=false;
         }
         
         var canvasdropbox = {
            draw:function(i){
               var c = document.getElementById(CANVAS.DROPBOX).getContext("2d");
               c.clearRect(0,0,DIMENSION.WIDTH,DIMENSION.HEIGHT);
               c.beginPath();
               c.fillStyle = "#FFF";
               c.fillRect(icons[i].x + icons[i].offsetX,icons[i].y + icons[i].offsetY,200,50);
               c.strokeStyle = "#000";
               c.lineWidth   = 2;
               c.moveTo(icons[i].x + icons[i].offsetX,icons[i].y + icons[i].offsetY);
               c.lineTo(icons[i].x + icons[i].offsetX + 200,icons[i].y + icons[i].offsetY + 0);
               c.lineTo(icons[i].x + icons[i].offsetX + 200,icons[i].y + icons[i].offsetY + 50);
               c.lineTo(icons[i].x + icons[i].offsetX + 0,icons[i].y + icons[i].offsetY + 50);
               c.lineTo(icons[i].x + icons[i].offsetX + 0,icons[i].y + icons[i].offsetY + 0);
               c.stroke();
               c.fillStyle = "#000";

               c.fillText("TEXT IN CANVAS", icons[i].x  + icons[i].offsetX,icons[i].y  + icons[i].offsetY + 15, 200 );
               c.closePath();
            }
         };
         
         var canvasicon = {
            refresh:function(){
               try{
                  var c = document.getElementById(CANVAS.ICON).getContext("2d");
                  c.clearRect(0,0,DIMENSION.WIDTH,DIMENSION.HEIGHT);

                  /*var selected = -1;
                  if(current.mousedown){
                     selected = canvasicon.selected;
                  }else{
                     selected = canvasicon.hoverIcon();
                  }*/

                  for (i in icons){
                     
                     if (icons[i].x + icons[i].dx > DIMENSION.WIDTH - icons[i].width || icons[i].x + icons[i].dx < 0)
                        icons[i].dx = -icons[i].dx;
                     if (icons[i].y + icons[i].dy > DIMENSION.HEIGHT - icons[i].height || icons[i].y + icons[i].dy < 0)
                        icons[i].dy = -icons[i].dy;


                     if(i == canvasicon.selected){
                        canvasdropbox.draw(i);
                     }else{
                        icons[i].x += icons[i].dx;
                        icons[i].y += icons[i].dy;
                     }

                     canvasicon.drawIcon(icons[i]);
                  }
               }catch(ex){
                  dump(ex);
               }
            },
            drawIcon:function(icon){
               var c = document.getElementById(CANVAS.ICON).getContext("2d");
               var img = new Image();
               img.src = icon.src;

               c.drawImage(img,icon.x,icon.y,icon.width,icon.height);
               

            },
            addIcon:function(x,y,width,height,src){
               var i = (Math.random()*10)-5;
               var j = (Math.random()*10)-5;
               icon = {x:x,y:y,width:width,height:height,src:src,dx:i,dy:j};
               icons.push(icon);
            },
            hoverIcon:function(){
               var list = new Array();
               for (i in icons){
                  if(mouse.x-icons[i].x<icons[i].width
                  && mouse.x-icons[i].x>0
                  && mouse.y-icons[i].y<icons[i].height
                  && mouse.y-icons[i].y>0){
                     list.push(i);
                  }
               }
               var tmp = list.pop();
               if(tmp>=0){
                  return tmp;
               }else{
                  return -1;
               }
            },
            selectIcon:function(){
               try{
                  canvasicon.selected = canvasicon.hoverIcon();
               }catch(ex){
                  alert(ex);
               }
            },
            /*updateIcon:function(iconIndex){
               icons[iconIndex].x=mouse.x-icons[iconIndex].offsetX;
               icons[iconIndex].y=mouse.y-icons[iconIndex].offsetY;
               canvasicon.refresh();
            },
            moveIcon:function(){
               //var selected = canvasicon.selectIcon();
               canvasicon.updateIcon(canvasicon.selected);
            },*/
            updateOffset:function(){
               try{
                  if(canvasicon.selected>=0){
                     icons[canvasicon.selected].offsetX=mouse.x-icons[canvasicon.selected].x;
                     icons[canvasicon.selected].offsetY=mouse.y-icons[canvasicon.selected].y;
                  }
               }catch(ex){
               }
            },//*/
            selected:-1
            
         };
          function disableSelection(element) {
            if (typeof element.onselectstart != 'undefined') {
               element.onselectstart = function() { return false; };
            }/* else if (typeof element.style.MozUserSelect != 'undefined') {
               element.style.MozUserSelect = 'none';
            }*/ else {
               element.onmousedown = function() { return false; };
            }
         }

         function dump(text){
            document.status.display.value=text;
         }
         
      </script>
   </head>
   <body>
       <canvas id="canvasIcon" width="1260" height="670" style="border:1px solid #c3c3c3;position:fixed;"> 
         Your browser  does not support the canvas element.
      </canvas>
      <canvas id="canvasDropBox" width="1260" height="670" style="border:1px solid #c3c3c3;position:fixed;"> 
         Your browser  does not support the canvas element.
      </canvas>
      <form name="status" style="position:fixed;top:600px;left:80px;">
      <input type="text" name="display">
      </form>
   </body>
</html>
         
